<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { User, Lock } from '@element-plus/icons-vue'
import { login, getSystemInfo } from '@/assets/api/system'
import { useUserStore } from '@/stores/index'
import { checkImgExists } from '@/assets/js/utils'
import config from '@/assets/js/config'
const loginForm = reactive({})
const loginFormRef = ref(null)
const formRules = reactive({
    userName: [
        {
            required: true,
            message: '请输入用户名',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
        },
    ],
})

const userStore = useUserStore()
const imageStatus = ref(false)
// 验证图片有效
function inspectImage(url) {
    checkImgExists(url).then(() => {
        imageStatus.value = true
    })
}
function getData() {
    if (userStore.systemInfo) {
        if (userStore.systemInfo.logo) {
            inspectImage(config.imgUrl + userStore.systemInfo.logo)
        }
    }
}
getData()
function loginAction() {
    loginFormRef.value.validate((valid, fields) => {
        if (valid) {
            login(loginForm).then((res) => {
                if (res.data.permit_check == 'no') {
                    router.replace('/system/set')
                } else {
                    router.replace('/')
                }
                userStore.setToken(res.data.token)
                userStore.setUserInfo({
                    userName: loginForm.userName,
                })
                userStore.setPermitCheck(res.data.permit_check)
                userStore.setPermission(res.data.permission)
                getInfo()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
function getInfo() {
    getSystemInfo().then((res) => {
        userStore.setSystemInfo(res.data)
    })
}
</script>
<template>
    <div class="page-login">
        <div class="left"></div>
        <div class="login-blk">
            <img
                v-if="userStore.systemInfo && imageStatus"
                :src="config.imgUrl + userStore.systemInfo.logo"
                class="logo"
            />
            <img v-else src="@/assets/images/logo.png" alt="" />
            <!-- <img class="logo" src="@/assets/images/logo.png" alt="" /> -->
            <h1 class="title">
                {{
                    userStore.systemInfo
                        ? userStore.systemInfo.gatewayName
                        : '边缘计算网关'
                }}
            </h1>
            <el-form
                ref="loginFormRef"
                :model="loginForm"
                :rules="formRules"
                class="login-form"
                size="large"
            >
                <el-form-item prop="userName">
                    <el-input
                        v-model="loginForm.userName"
                        :prefix-icon="User"
                        placeholder="用户名"
                    />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        :prefix-icon="Lock"
                        placeholder="密码"
                        type="password"
                    />
                </el-form-item>
                <el-form-item style="margin-top: 60px">
                    <el-button class="full" type="primary" @click="loginAction">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.page-login {
    height: 100vh;
    display: flex;
    align-items: center;
    .left {
        width: 73%;
        height: 100%;
        background: url(@/assets/images/login.png) no-repeat center;
        background-size: 100% 100%;
    }
    .login-blk {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;

        .title {
            margin-top: 12px;
            margin-bottom: 40px;
            color: rgb(0 0 0);
            font-weight: 600;
            font-size: 22px;
        }
        .logo {
            width: 44px;
        }
    }
    .login-form {
        width: 70%;
        margin: 60px auto;
    }
}
</style>
